<template>
  <view class="page-container">
    <!-- 顶部标签栏 -->
    <u-sticky bgColor="#ffffff">
      <view class="header">
        <u-tabs 
          :current="index" 
          :list="tabs" 
          :scrollable="false"
          active-color="#2979ff"
          inactive-color="#606266"
          bar-width="80"
          bar-height="4"
          height="88"
          font-size="34"
		  @change="tabChange"
        ></u-tabs>
      </view>
    </u-sticky>
    
    <!-- 主要内容区域 -->
    <view class="content">
		
	  <!-- 岗位列表 -->
      <view v-show="index == 0">
      	<!-- 热门岗位标题 -->
      	  <view class="section-title">
      	    <image src="../../static/hot.png" class="title-icon"></image>
      	    <text class="title-text">热门岗位</text>
      	  </view>
      	  
      	  <!-- 岗位网格 -->
      	  <view class="position-grid">
      	    <view 
      	      class="position-card" 
      	      v-for="(position, idx) in positions" 
      	      :key="position.id"
      	      :class="{'position-card-active': activeIndex === idx}"
      	      @click="handleClickPostion(position.id)"
      	      @touchstart="activeIndex = idx"
      	      @touchend="activeIndex = -1"
      	    >
      	      <view class="position-name-wrap">
      	        <text class="position-name">{{position.name}}</text>
      	      </view>
      	      <text class="position-desc">点击开始模拟面试</text>
      	    </view>
      	  </view>
      	</view>
		
		
		<view v-show="index == 1">
			<view class="report-list">
			  <view 
				class="report-item" 
				v-for="(report, idx) in reports" 
				:key="report.reportId"
				@click="showReportDetail(report.reportId)"
			  >
				<view class="report-header">
				  <text class="report-position">{{report.positionName}}</text>
				  <u-tag 
					:text="report.overallScore.toFixed(2) + '分'" 
					:type="getScoreTagType(report.overallScore)" 
					size="mini"
				  />
				</view>
				<view class="report-info">
				  <text class="report-time">开始时间: {{formatTime(report.startTime)}}</text>
				  <text class="report-time">结束时间: {{formatTime(report.endTime)}}</text>
				</view>
			  </view>
			</view>
		  </view>
      </view>
  </view>
</template>

<script>
  import { listAll, genQuestion } from '@/api/interview/position';
  import { listReports } from '@/api/interview/report';
  
  export default {
    data() {
      return {
        index: 0,
        activeIndex: -1,
        tabs: [{
          name: '模拟面试',
        }, {
          name: '面试报告',
        }],
        positions: [],
		reports: []
      };
    },
    methods: {
	  showReportDetail(reportId){
		  uni.navigateTo({
		  	url:'/pages/reportDetail/reportDetail?reportId=' + reportId
		  })
	  },
	  // tab切换
	  tabChange(item){
		  this.index = item.index
		  if(this.index == 0){
			  // 重新加载岗位信息
		  }else{
			  // 重新加载面试报告列表
			  this.getReports()
		  }
	  },
      getPostions() {
        listAll().then(res => {
          this.positions = res.data
        })
      },
	  getReports() {
	    listReports().then(res => {
	      this.reports = res.data
	    })
	  },
      handleClickPostion(positionId) {
        uni.showLoading({
          title: '准备面试中...'
        });
        genQuestion(positionId).then(res => {
          uni.setStorageSync("interviewRecord", res.data);
          uni.hideLoading();
          uni.navigateTo({
            url: '/pages/answer/answer'
          })
        }).catch(() => {
          uni.hideLoading();
        });
      },
	  getScoreTagType(score) {
		  if(score >= 80) return 'success';
		  if(score >= 60) return 'warning';
		  return 'error';
		},
		formatTime(time) {
		  if(!time) return '-';
		  return new Date(time).toLocaleString();
		}
    },
    onLoad() {
      this.getPostions();
    }
  }
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: #ffffff;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.content {
  flex: 1;
  padding: 30rpx;
  padding-bottom: 60rpx;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  
  .title-icon {
    width: 50rpx;
    height: 50rpx;
    margin-right: 20rpx;
  }
  
  .title-text {
    font-size: 36rpx;
    font-weight: bold;
    color: #303133;
  }
}

.position-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.position-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  aspect-ratio: 1/1; /* 保持正方形 */
  min-height: 0; /* 防止内容溢出 */
  
  &-active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
    background-color: #f5f7fa;
  }
  
  .position-name-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    text-align: center;
    word-break: break-word; /* 更优雅的换行方式 */
    padding: 10rpx 0;
    min-height: 0;
  }
  
  .position-name {
    font-size: 32rpx;
    color: #303133;
    font-weight: 500;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制最多2行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .position-desc {
    font-size: 24rpx;
    color: #909399;
    margin-top: 10rpx;
  }
}
.report-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
 
.report-item {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}
 
.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
 
.report-position {
  font-size: 32rpx;
  font-weight: 500;
  color: #303133;
}
 
.report-info {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}
 
.report-time {
  font-size: 26rpx;
  color: #909399;
}
</style>